<template>
  <!-- 发布文章卡片区 -->
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>账户信息</span>
    </div>
    <div class="text item cardbody">
      <!-- 左边 -->
      <div class="lt">
        <el-form
          ref="accountFormRef"
          :model="accountForm"
          label-width="100px"
          :rules="accountFormRules"
        >
          <el-form-item label="用户名：" prop="name">
            <el-input v-model="accountForm.name"></el-input>
          </el-form-item>

          <el-form-item label="手机号：">
            <el-input v-model="accountForm.mobile" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="邮箱：" prop="email">
            <el-input v-model="accountForm.email"></el-input>
          </el-form-item>

          <el-form-item label="简介：">
            <el-input type="textarea" v-model="accountForm.intro"></el-input>
          </el-form-item>

          <el-form-item label="简介：">
            <el-button type="primary" @click="editAccount()">更新账户</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 右边 -->
      <div class="rt">
        <el-upload action :show-file-list="false" :http-request="httpRequest">
          <img
            v-if="accountForm.photo"
            :src="accountForm.photo"
            class="avatar"
            width="200"
            height="200"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </div>
  </el-card>
</template>

<script>
// 导入bus
import bus from '@/utils/bus.js'

export default {
  name: 'Account',
  data () {
    return {
      // 表单校验
      accountFormRules: {
        name: [
          { required: true, message: '名字必填' },
          // 后端要求title长度介于1-7个字符
          {
            min: 1,
            max: 7,
            message: '名字长度介于1-7个字符之间'
          }
        ],
        email: [
          { required: true, message: '邮箱必填' },
          { type: 'email', message: '邮箱格式不正确' }
        ]

        // 手机号校验
        // mobile: [
        //   { required: true, message: '手机号码必填' },
        //   { pattern: /^1[35789]\d{9}$/, message: '手机号码格式不对' }
        // ]
      },
      accountForm: {
        id: '', // id
        name: '', // 名称
        mobile: '', // 手机号
        email: '', // 邮箱
        intro: '' // 简介
      }
    }
  },
  created () {
    this.getAccountInfo()
  },
  methods: {
    // 自定义上传头像行为
    // resource参数是一个对象，里面有正在上传的图片信息
    httpRequest (resource) {
      let fd = new FormData()
      fd.append('photo', resource.file)
      let pro = this.$http.patch('/user/photo', fd)
      pro
        .then(result => {
          if (result.data.message === 'OK') {
            // 把服务器端返回的新的头像获得到，并更新accountFrom.photo成员里面
            this.accountForm.photo = result.data.data.photo
            // 更新home头像显示
            bus.$emit('upAccountPhoto', result.data.data.photo)
            this.$message.success('头像更新成功~')
          }
        })
        .catch(err => {
          return this.message.error('头像更新失败' + err)
        })
    },
    // 更新账户动作
    editAccount () {
      // 表单校验
      this.$refs.accountFormRef.validate(valid => {
        if (valid) {
          // axios
          let pro = this.$http.patch('/user/profile', this.accountForm)
          pro
            .then(result => {
              if (result.data.message === 'OK') {
                // bus调用事件，给home传递更新后的名字
                // bus.$emit('upAccountName', this.accountFrom.name)和下面显示效果一样
                bus.$emit('upAccountName', result.data.data.name)
                this.$message.success('更新账户成功~')
              }
            })
            .catch(err => {
              return this.message.error('更新账户失败' + err)
            })
        }
      })
    },
    // 获得账户基本信息
    getAccountInfo () {
      let pro = this.$http.get('/user/profile')
      pro
        .then(result => {
          if (result.data.message === 'OK') {
            // 把获得账户的信息赋予给accountForm
            this.accountForm = result.data.data
          }
        })
        .catch(err => {
          return this.$message.error('获得账户失败：' + err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.cardbody {
  display: flex;
  justify-content: space-between;
  .lt {
    width: 45%;
  }
  .rt {
    width: 30%;
    border: 1px solid #f0f0f0;
    text-align: center;
    padding-top: 60px;
  }
}
</style>
